{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/Cant bind input when using_abstract_classes_2+_level_of_hierarchy/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"233439d9-dc95-57a6-a5e2-233b0eebe873","excerpt":"로컬 컴파일 시점에서는 아무 문제 없는 코드가 배포한 프로덕션에서 에러가 난다.😭 당황스럽지 않을 수가 없다… ㅎㅎ 빌드를 하게 되면 쓰지 않는 코드들을 자동으로 삭제하는데, AbstractComponent 안에 있는 input값이 사용되지 않는다고 판단해서 없앤 것 같다. 문제의 코드 추상 컴포넌트: AbstractComponent AbstractComponent를 extends하고 있는 컴포넌트 에러 메시지 can’t bind to keyEvents$ since it isn’t a known…","html":"

로컬 컴파일 시점에서는 아무 문제 없는 코드가 배포한 프로덕션에서 에러가 난다.😭

\n

당황스럽지 않을 수가 없다… ㅎㅎ

\n

빌드를 하게 되면 쓰지 않는 코드들을 자동으로 삭제하는데, AbstractComponent 안에 있는 input값이 사용되지 않는다고 판단해서 없앤 것 같다.

\n

문제의 코드

\n\n
export abstract class AbstractComponent {\n  @Input() input$: Observable<string>;\n  @Input() keyEvent$: Observable<KeyboardEvent>;\n  @Input() isFocused$: BehaviorSubject<boolean>;\n\n  ngOnInit() {\n    this.keyEvent$.pipe().....\n  }
\n\n
export class PCSearchAutoComponent extends AbstractComponent {\n......\n}
\n
export class PCSearchHistoryComponent extends AbstractComponent {\n......\n}
\n

에러 메시지

\n\n

해결 방안

\n
    \n
  1. 자식 컴포넌트에 input 값들을 선언
    2. \n
\n
export class PCSearchAutoComponent extends SearchTypeaheadInteraction {\n  @Input() input$: Observable<string>;\n  @Input() keyEvent$: Observable<KeyboardEvent>;\n  @Input() isFocused$: BehaviorSubject<boolean>;\n}
\n
export class PCSearchHistoryComponent extends SearchTypeaheadInteraction {\n  @Input() input$: Observable<string>;\n  @Input() keyEvent$: Observable<KeyboardEvent>;\n  @Input() isFocused$: BehaviorSubject<boolean>;\n}
\n\n
@Directive()\nexport abstract class AbstractComponent {\n  @Input() input$: Observable<string>;\n  @Input() keyEvent$: Observable<KeyboardEvent>;\n  @Input() isFocused$: BehaviorSubject<boolean>;\n}
\n\n
\n

참고

\n
\n","frontmatter":{"title":"Cant bind input when using abstract classes 2+ level of hierarchy","date":"April 24, 2020"}}},"pageContext":{"slug":"/Today I Learned/Cant bind input when using_abstract_classes_2+_level_of_hierarchy/","previous":{"fields":{"slug":"/JavaScript/Callback_Function/"},"frontmatter":{"title":"Callback Function","category":"JavaScript","draft":false}},"next":{"fields":{"slug":"/Test/테스트의_종류/"},"frontmatter":{"title":"테스트의 종류","category":"Test","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}